<template>
  <div id="app">
    <router-view></router-view>
    <!--tabbar-->
    <tabbar class="tabber" v-if="isShow">
      <tabbar-item link="/home">
        <img slot="icon" src="./assets/1.png">
        <span slot="label">外卖</span>
      </tabbar-item>
      <tabbar-item show-dot link="/second">
        <img slot="icon" src="./assets/2.png">
        <span slot="label">发现</span>
      </tabbar-item>
      <tabbar-item selected link="/component/demo">
        <img slot="icon" src="./assets/3.png">
        <span slot="label">订单</span>
      </tabbar-item>
      <tabbar-item badge="2">
        <img slot="icon" src="./assets/4.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
//1.导入组件
import { Tabbar, TabbarItem } from 'vux'
import { Scroller } from 'vux'
export default {
  name: 'app',
  data: function () {
    return {
      isShow: true
    }
  },
  methods() {
    

  },
  mounted(){
    if(this.$route.path.split('/').length>2){
      this.isShow = false
    }
    else{
      this.isShow = true
    }
  },
  watch: {
    $route: function (to, from) {
      var a = to.path.split('/').length
      if (a > 2) {
        this.isShow = false
      }
      else {
        this.isShow = true
      }

    }
  },
  //2.注册组件
  components: {
    Tabbar,
    TabbarItem,
    Scroller
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

body {
  background-color: #fbf9fe; // min-height: 500px;
}

.weui-tabbar {
  position: fixed !important;
  bottom: 0;
}
</style>
